<template>
  <div>
    <el-divider style="margin: 10px 0" />
    <el-row :gutter="8">
      <el-col v-for="item in positionList" :key="item.key" :span="4">
        <el-tooltip effect="light" :content="item.lable" placement="top">
          <i
            @click="positonHandle(item.key)"
            class="icon"
            :class="[item.icon]"
          />
        </el-tooltip>
      </el-col>
    </el-row>
    <setting-item-box name="位置">
      <el-input v-model="chartAttr.y" :min="0" size="small" placeholder="px">
        <template #prefix>
          <span> 上 </span>
        </template>
      </el-input>
      <el-input v-model="chartAttr.x" :min="0" size="small" placeholder="px">
        <template #prefix>
          <span> 左 </span>
        </template>
      </el-input>
    </setting-item-box>
  </div>
</template>
<script>
import SettingItemBox from '@/components/SettingItemBox'
export default {
  components: { SettingItemBox },
  props: {
    chartAttr: {
      type: Object,
      required: true,
      default: () => { }
    },
    canvasConfig: {
      type: Object,
      required: true,
      default: () => { }
    },
  },
  data () {
    return {
      positionList: [
        {
          key: 'left',
          lable: '居左',
          icon: 'el-font-left'
        },
        {
          key: 'xcenter',
          lable: 'X轴居中',
          icon: 'el-font-xcenter'
        },
        {
          key: 'right',
          lable: '居右',
          icon: 'el-font-right'
        },
        {
          key: 'top',
          lable: '顶部',
          icon: 'el-font-top'
        },
        {
          key: 'ycenter',
          lable: 'Y轴居中',
          icon: 'el-font-ycenter'
        },
        {
          key: 'bottom',
          lable: '底部',
          icon: 'el-font-bottom'
        }
      ]
    }
  },
  methods: {
    positonHandle (key) {
      switch (key) {
        // 局左
        case this.positionList[0]['key']:
          this.chartAttr.x = 0
          break
        // X轴居中
        case this.positionList[1]['key']:
          this.chartAttr.x = (this.canvasConfig.width - this.chartAttr.w) / 2
          break
        // 局右
        case this.positionList[2]['key']:
          this.chartAttr.x = this.canvasConfig.width - this.chartAttr.w
          break
        // 顶部
        case this.positionList[3]['key']:
          this.chartAttr.y = 0
          break
        // Y轴居中
        case this.positionList[4]['key']:
          this.chartAttr.y = (this.canvasConfig.height - this.chartAttr.h) / 2
          break
        // 底部
        case this.positionList[5]['key']:
          this.chartAttr.y = this.canvasConfig.height - this.chartAttr.h
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.icon {
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}
</style>